import React, { Fragment } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { WIDTH } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page'
import { SceneMap, TabBar, TabView } from 'react-native-tab-view'
import Animated from 'react-native-reanimated'
import { getInputRange, getScale, getTranslate, getTranslateX } from 'src/utils/TabViewUtil'

const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]}/>
)
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]}/>
)
const ThirdRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#11440d' }]}/>
)
const TAG = 'TestTabView'
// const inputRange = [0, 0.5, 1, 1.5, 2]
const inputRange = getInputRange(3)
const width = WIDTH / 3
export default class TestTabView extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      index: 0,
      routes: [
        { key: 'first', title: 'First' },
        { key: 'second', title: 'Second' },
        { key: 'third', title: 'third' }
      ]
    }
  }

  childRender () {
    return (
      <TabView
        navigationState={this.state}
        renderScene={SceneMap({
          first: FirstRoute,
          second: SecondRoute,
          third: ThirdRoute
        })}
        onIndexChange={this._onIndexChange}
        renderTabBar={this._renderCustomTabBar}
        style={styles.container}
      />
    )
  }

  _renderCustomTabBar = (props) => {
    console.info(TAG, props)
    const { position } = props
    const translateX = getTranslate(position, 3)
    const scale = getScale(position, 3)
    return (
      <Fragment>
        <View style={styles.tabBarView}>
          <Text>啦啦啦</Text>
          <Text>yeyey</Text>
        </View>
        <Animated.View style={[styles.indicator, { transform: [{ translateX: translateX, scale: scale }] }]}/>
      </Fragment>
    )
  }

  _renderTabBar = (props) => {
    return (
      <TabBar
        {...props}
        tabStyle={{ width: 'auto' }}
        labelStyle={{ width: 'auto' }}
        activeColor={'red'}
        inactiveColor={'white'}
        indicatorStyle={{ backgroundColor: 'white' }}
        // position={this.position}
      />
    )
  }

  _onIndexChange = (index) => {
    console.info(index)
    this.setState({ index })
  }
}
const styles = StyleSheet.create({
  container: {},
  scene: {
    flex: 1
  },
  tabBarView: {
    height: 50,
    backgroundColor: 'red',
    flexDirection: 'row'
  },
  indicator: {
    width: WIDTH / 3,
    height: 10,
    backgroundColor: 'gray'
  }
})
